<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    <style>
        /* 我们可以在父元素上添加 overflow: auto; 来解决子元素溢出的问题: */
        div {
            border: 3px solid #4CAF50;
            padding: 5px;
        }

        .img1 {
            float: right;
        }

        .clearfix {
            overflow: auto;
        }

        .img2 {
            float: right;
        }
    </style>
</head>

<body>

    <p>以下实例图在父元素中溢出，很不美观:</p>

    <div>
        <img class="img1" src="images/pineapple.jpg" alt="Pineapple" width="170" height="170">
        菜鸟教程 - 学的不仅是技术，更是梦想！！！
    </div>

    <p style="clear:right">在父元素上通过添加 clearfix 类，并设置 overflow: auto; 来解决该问题:</p>

    <div class="clearfix">
        <img class="img2" src="images/pineapple.jpg" alt="Pineapple" width="170" height="170">
        菜鸟教程 - 学的不仅是技术，更是梦想！！！
    </div>

</body>

</html>